<template>
	<div class="container">
		<a-form :form="form">
			<a-form-item label="学分发放单位">
				<a-select v-decorator="['SourceType', { rules: [{ required: true, message: '请选择学分发放单位' }] }]" style="width:100%" @change="sendSourceTypeFun">
					<a-select-option v-for="(item, index) in sourceData" :key="item.Key" :value="item.Key">{{ item.Value }}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="学分发放类型">
				<a-select v-decorator="['Type', { rules: [{ required: true, message: '请选择学分发放类型' }] }]" style="width:100%" @change="sendTypeFun">
					<a-select-option v-for="(item, index) in sendTypeList" :key="item.Key" :value="item.Key">{{ item.Value }}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="假期">
				<a-select v-decorator="['sessionID', { rules: [{ required: true, message: '请选择假期' }] }]" style="width:100%" @change="sessionFun">
					<a-select-option v-for="(item, index) in sessionList" :key="item.ID" :value="item.ID">{{ item.Name }}</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="奖项" v-if="form.getFieldValue('Type')==1">
				<a-select v-decorator="['sessionPrizeID', { rules: [{ required: true, message: '请选择奖项' }] }]" showSearch optionFilterProp="children" style="width:100%">
					<a-select-option v-for="(item, index) in PrizeList" :key="index" :value="item.ID">{{ item.LevelName }} （{{ item.Score }}分）</a-select-option>
				</a-select>
			</a-form-item>
			<a-form-item label="奖项名称" v-if="form.getFieldValue('Type') == 1">
				<a-input v-decorator="['prizeTitle', { rules: [{ required: true, message: '请输入奖项名称' }] }]" />
			</a-form-item>
			<a-form-item label="学号">
				<a-textarea
					placeholder="请输入学号，多个学号之间请换行"
					:autosize="{ minRows: 10, maxRows: 20 }"
					v-decorator="['userNo', { rules: [{ required: true, message: '请输入学号' }] }]"
				/>
				当前正在录入第{{ form.getFieldValue('userNo') ? form.getFieldValue('userNo').split('\n').length : 0 }}条数据
			</a-form-item>
			<a-form-item label="导入结果" v-if="importIf">
				<div class="flex">
					<a-col :span="12" style="margin-right:5px;">
						成功列表，共{{ importData.filter(m => m.IsSuccess).length }}条
						<div style="height:170px;overflow:hidden scroll;">
							<a-list class="followListArea" size="small" bordered :data-source="importData.filter(m => m.IsSuccess)">
								<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
									<div style="width: 95px">{{ item.UserNo }} :</div>
									<div style="flex: 1;text-align: left;">{{ item.Msg }}</div>
								</a-list-item>
							</a-list>
						</div>
					</a-col>
					<a-col :span="12">
						失败列表，共{{ importData.filter(m => !m.IsSuccess).length }}条
						<div style="height:170px;overflow:hidden scroll;">
							<a-list class="followListArea" size="small" bordered :data-source="importData.filter(m => !m.IsSuccess)">
								<a-list-item slot="renderItem" slot-scope="item, index" style="display: flex;">
									<div style="width: 95px">{{ item.UserNo }} :</div>
									<div style="flex: 1;text-align: left;">{{ item.Msg }}</div>
								</a-list-item>
							</a-list>
						</div>
					</a-col>
				</div>
			</a-form-item>
			<a-form-item class="fixed-bottom">
				<a-button type="primary" style="margin-left:400px;" @click="handleSubmit" :loading="loading">确认发放</a-button>
				<a-button style="margin-left: 10px;" @click="reset">重置</a-button>
			</a-form-item>
		</a-form>
	</div>
</template>

<script>
import { CommonDoGetSendScorePracticeSessionList,ManagePracticeScore,CommonDoGetPracticeSessionPrizeList } from '@/api/follow';
export default {
	props:{
		currentType:String
	},
	data() {
		return {
			formLayout: 'horizontal',
			form: this.$form.createForm(this, {
				name: 'coordinated'
			}),
			importIf: false,
			loading: false,
			sendTypeList:this.global.sendTypeList,
			sessionList:[],
			PrizeList:[],
			sourceData:[
				{
					Key:'1',
					Value:"学院"
				},
				{
					Key:'2',
					Value:"校团委"
				}
			]
		};
	},
	created() {
		this.getOtherList()
	},
	methods: {
		sendSourceTypeFun(e){
			if(e){
				this.form.resetFields();
				this.form.SourceType=e
			}
		},
		async getOtherList(){
			let res = await CommonDoGetSendScorePracticeSessionList()
			this.sessionList = res.data.data
		},
		sendTypeFun(e){
			if(e==1 && this.form.getFieldValue('sessionID')){
				this.getPrizeList()
			}
		},
		sessionFun(e){
			if(e && this.form.getFieldValue('Type')==1){
				this.getPrizeList(e)
			}
		},
		async getPrizeList(e){
			console.log(this.form.getFieldValue('sessionID'))
			let data = {}
			data.sessionID = e||this.form.getFieldValue('sessionID')
			if(this.form.getFieldValue('SourceType')==1){
				data.level = 2
			}else{
				data.level = ''
			}
			let res = await CommonDoGetPracticeSessionPrizeList(data)
			this.PrizeList = res.data.data
		},
		async ActivityTypePrizeTypeFun(e) {
			this.form.setFieldsValue({ ActivityTypePrizeID: '' });
			let res = await GetActivityTypePrizeListCommon({ type: e, activityID: this.$route.query.activityID });
			this.ActivityTypePrizeList = res.data.data;
		},
		closeFunction(data) {
			this.importIf = false;
			this.form.resetFields();
			this.$emit('closeFun', 1);
		},
		handleSubmit(e) {
			this.form.validateFields(async (err, values) => {
				if (!err) {
					let data = values;
					data.content = values.userNo.trim();
					if (!data.content) {
						this.$message.error('学号不能为空！');
						return false;
					}
					this.loading = true;
					data.splitChar = '\n';
					let res = {};
					res = await ManagePracticeScore(this.currentType=='College'?'DoCollegeSend':'DoSchoolSend',data)
					this.importData = res.data.data;
					this.form.resetFields();
					this.$message[res.data.code == 0 ? 'success' : 'error'](res.data.msg);
					this.importIf = true;
					this.loading = false;
				}
			});
		},
		reset(){
			this.form.resetFields();
			this.importData = []
			this.importIf = false
			this.loading = false
		}
	}
};
</script>

<style lang="less" scoped>
/deep/.ant-form-item {
	margin: 20px 50px;
	display: flex;
}
/deep/.ant-form-item-label {
	width: 180px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	text-align: right;
}
/deep/.ant-form-item-control-wrapper {
	flex: 1;
}

.ant-form-item {
	margin-bottom: 10px;
}

/deep/.ant-form {
	margin-top: 50px;
	padding-bottom: 50px;
}
</style>
